<template>
<div>
  <div class="common-layout" >
    <el-container>
      <el-aside width="650px">
        <div class="affix-container">
          <el-affix target=".affix-container" :offset="80">
              <el-button type="warning" round style="width: 180px ;color: black">公司简介</el-button>
              <el-container>
                <el-header>
                </el-header>
                <el-main >
                    <p class="wz">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp天津滨海国际机场（Tianjin Binhai International Airport，IATA：TSN，ICAO：ZBTJ），
                      位于中国天津市东丽区，距市中心13公里，为4E级民用国际机场 [1] [61]，是中国国际航空物流中心 [2]、国际定期航班机场、
                      对外开放的国家一类航空口岸和中国主要的航空货运中心之一。
                    </p>
                    <p class="wz">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp天津滨海国际机场前身为天津张贵庄机场，始建于1939年11月；1950年正式通航；2007年完成一期扩建工程；2014年8月完成二期扩建工程。 [4-5]
                  据2017年8月机场官网显示，天津滨海国际机场拥有航站楼两座，分别为T1（国际及地区）、T2（国内），总建筑面积36.4万平方米、货库面积7.4万平方米；拥有跑道2条，长度分别为3600米、3200米；机位59个。 [1]截至2016年底，机场开通航线180条、通航城市132个。 [6]
                  2019年，天津机场完成旅客吞吐量2381.3万人次，同比增长0.9%；货邮吞吐量22.6万吨，同比下降12.6%；运输架次16.7万架次，同比下降6.4%。
                    </p>
                </el-main>
              </el-container>
          </el-affix>
        </div>

      </el-aside>
      <el-container>
        <el-header height="185px" >
          <el-divider content-position="center" style="margin-top: 3px;" >核心团队
          </el-divider>
          <span>
             <img src="../../assets/imgs/peamp.png" width="578px" height="175px" style="text-align:center;overflow: hidden" class="pic">
          </span>
        </el-header>
        <el-main>
          <el-carousel indicator-position="outside">
            <el-carousel-item v-for="(item, index) in images" :key="index">
              <img :src="item.src" :alt="item.alt" class="carousel-image"/>
            </el-carousel-item>
          </el-carousel>
        </el-main>
      </el-container>
    </el-container>
  </div>
</div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 直接声明响应式状态
const tabPosition = ref('left')
const bookingInfo = ref({
  departure: '',
  destination: '',
  startDate: null,
  passengerCount: 1,
})

// 计算属性
const filteredImages = computed(() => {
  // 根据 searchKeyword 过滤 images
  return images.value.filter(image => image.alt.includes(searchKeyword.value))
})

// 图片数组声明
const images = ref([
      { src: '../src/assets/imgs/lun1.jpg', alt: 'Image 1 description' },
      { src: '../src/assets/imgs/lun2.jpg', alt: 'Image 1 description' },
      { src: '../src/assets/imgs/lun3.jpg', alt: 'Image 1 description' },
      { src: '../src/assets/imgs/lun4.jpg', alt: 'Image 1 description' },
      // 其他图片对象...
    ])

</script>

<style scoped>

.affix-container {
  text-align: center;
    border: #e0d9a9 1px solid;
  border-radius: 4px;
  /*background: var(--el-color-primary-light-9);*/
  /*opacity: 0.6;*/
  background-color: rgba(255, 184, 2, 0.05);

}
/*走马灯样式设计*/
/*<style scoped>*/
.el-carousel__item h3 {
  color: #475669;
  opacity: 1;
  line-height: 200px;
  margin: 0;
  text-align: center;
}
.carousel-image{
  width: 100%;
  height: 300px;
    border-radius: 3px;


}
.demo-rate-block .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.wz {
    color: #000;
    border: 1px solid #dee2e6; /* 边框颜色 */
  border-radius: 10px;
    padding: 1rem; /* 内边距，让文字与边框有一定间隔 */
    text-align: left;
    background-color: rgba(102, 106, 108, 0.3); /* 修改为完全不透明的白色 */
}

</style>